<template>
  <!-- 曲线 -->
  <div class="form">
    <div class="inputBox">
      <label for="">点的坐标</label>
      <textarea v-model="points" class="pointsText"></textarea>
    </div>
    <div class="inputBox">
      <label for="">fill</label>
      <input type="color" name="" id="" v-model="fill" />
    </div>
    <div class="inputBox">
      <label for="">strokeColor</label>
      <input type="color" name="" id="" v-model="stroke" />
    </div>
    <div class="inputBox">
      <label for="">strokeWidth</label>
      <input type="text" name="" v-model="strokeWidth" />
    </div>
    <div class="inputBox">
      <button @click="addPolyline">addPolyline</button>
    </div>
  </div>
</template>
<script>
import { reactive, toRaw, toRefs } from "vue";
import * as d3 from "d3";
import { polylineDrawAdd } from "../../util/geoDrawAdd.js";
export default {
  setup() {
    const polyline = reactive({
      points: "100,10 40,198 190,78 10,78 160,198",
      stroke: "#000",
      strokeWidth: 4,
    });

    function addPolyline() {
      const geo = {};
      Object.assign(geo, toRaw(polyline));
      polylineDrawAdd(geo);
    }

    return { ...toRefs(polyline), addPolyline };
  },
};
</script>
<style lang="scss" scoped>
.pointsText {
  width: 70px;
  height: 100px;
  resize: none;
}
</style>